<template>
  <div>
    <NavBar />
    <div class="main-content">
      <div class="container">
        <h2>代买服务发布</h2>
        <form @submit.prevent="submitForm" class="demand-form">
          <div class="form-group">
            <label for="mealType">用餐类别:</label>
            <select id="mealType" v-model="demand.mealType" required>
            <option value="" disabled>请选择用餐类别</option>
            <option value="早餐">早餐</option>
            <option value="午餐">午餐</option>
            <option value="晚餐">晚餐</option>
            </select>
          </div>
          <div class="form-group">
            <label for="restaurant">餐厅:</label>
            <input type="text" id="restaurant" v-model="demand.restaurant" required />
          </div>
          <div class="form-group">
            <label for="dish">餐品:</label>
            <input type="text" id="dish" v-model="demand.dish" required />
          </div>
          <div class="form-group">
              <label for="quantity">购买数量:</label>
              <input type="number" id="quantity" v-model="demand.quantity" required min="1"/>
          </div>
          <div class="form-group">
              <label for="totalAmount">总金额:</label>
              <input type="money" id="totalAmount" v-model="demand.totalAmount" required />
          </div>
          <div class="form-group">
            <label for="deliveryLocation">服务位置:</label>
            <input type="text" id="deliveryLocation" v-model="demand.deliveryLocation" required />
          </div>
          <div class="form-group">
            <label for="serviceFee">服务小费:</label>
            <input type="money" id="serviceFee" v-model="demand.serviceFee" required />
          </div>
          <div class="form-group">
            <label for="expectedTime">服务时间:</label>
            <input type="datetime-local" id="expectedTime" v-model="demand.expectedTime" required />
          </div>
          <button type="submit" class="submit-button">发布服务</button>
        </form>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import NavBar from './NavBar.vue'
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';

const router = useRouter()

const demand = ref({
mealType: '',
restaurant: '',
dish: '',
quantity: '',
totalAmount: '',
buyerID: localStorage.getItem('userID'),
deliveryLocation: '',
serviceFee: '',
expectedTime: ''
})

const submitForm = async () => {
  const formData = new URLSearchParams()
  for (const [key, value] of Object.entries(demand.value)) {
    formData.append(key, value)
  }
  try {
  if (!demand.value.mealType ||!demand.value.restaurant ||!demand.value.dish ||!demand.value.quantity ||!demand.value.totalAmount ||!demand.value.buyerID || !demand.value.deliveryLocation || !demand.value.serviceFee || !demand.value.expectedTime) {
    alert('请完整填写所有信息')
  } else {
    const response = axios.post('http://localhost:8080/servicepublish', formData)
    response.then( res =>{
      if(res.data.success){
        alert('发布成功')
        router.push('/dashboard')
      }else{
        alert('发布失败, 请重试')
      }
    })
  }
} catch (error) {
  console.log(error)
  alert('发布失败')
}
}
</script>

<style scoped>
  .container {
  max-width: 700px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
h1 {
  color: #333;
  margin-bottom: 20px;
}
h2 {
  color: #333;
  margin-bottom: 15px;
}

.demand-form {
display: flex;
flex-direction: column;
}

.form-group {
margin-bottom: 15px;
}

.form-group select {
width: 82.5%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 80%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.submit-button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

.submit-button:hover {
background-color: #45a049;
}
</style>